<template>
  <div class="jsgltck_box">
    <div class="jsgltck">
      <div class="head_clos">
        <h2 v-if="$store.state.jsgl==false">新增角色</h2>
        <h2 v-if="$store.state.jsgl==true">修改角色</h2>
        <span>
          <a-icon class="close" @click="close" type="close" />
        </span>
      </div>
      <div class="jsgltck_inp">
        <ul class="scroll">
          <li class="li">
            <span class="inp_tit">角色名：</span>
            <a-input
              :disabled="$store.state.jsgl==true?true:false"
              v-model="username"
              style="width:500px"
              type="text"
              placeholder="请输入角色名"
            />
          </li>
          <!-- <li>
            <span class="inp_tit">
              2：
            </span>
             <a-textarea style="width:500px; vertical-align: top;" placeholder="Basic usage" :rows="4"/>
          </li>-->

          <li class="li">
            <span class="inp_tit">权限：</span>
            <!-- <a-checkbox-group :options="plainOptions" v-model="checkedList" @change="onChange" /> -->
            <a-tree
              class="tree"
              checkable
              @expand="onExpand"
              :expandedKeys="expandedKeys"
              :autoExpandParent="autoExpandParent"
              v-model="checkedKeys"
              :checkStrictly="false"
              showIcon
              @select="onSelect"
              :selectedKeys="selectedKeys"
              :treeData="treeData"
            >
            <!-- <a-icon v-for="(item,i) in treeData"
                :key="i"  :slot="item.menu_icon" :type="item.menu_icon" /> -->
              <!-- <a-icon
                v-for="(item,i) in treeData"
                :key="i"
                :slot="item.menu_icon"
                :type="item.menu_icon"
              /> -->
            </a-tree>
            <!-- ==================================== -->
            <!-- <a-tree
              checkable
              @expand="onExpand"
              :expandedKeys="expandedKeys"
              :autoExpandParent="autoExpandParent"
              v-model="checkedKeys"
              @select="onSelect"
              :selectedKeys="selectedKeys"
              :treeData="treeData"
            />-->
            <!-- ==================================== -->
          </li>
          <li class="foot_btn">
            <a-button class="sub" @click="addjssub">确认提交</a-button>
            <a-button type="primary" @click="close">取消</a-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
const treeData = [];

export default {
  inject: ["reload"],
  data() {
    return {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData,
      username: this.$store.state.jsgl == true ? this.$parent.username : "",
      treeKeys: this.$store.state.jsgl == true ? this.$parent.power_list : [],
      tree: []
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
      this.treeKeys = val;
    }
  },
  components: {},
  methods: {
    addjssub() {
      if (this.username != "") {
        if (this.$store.state.jsgl) {
          //修改--------------
          this.axios
            .post(
              "quanxian/roleEdit.php",
              qs.stringify({
                id_num: this.$parent.id_num,
                name: this.username,
                power: this.treeKeys
              })
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                this.$store.state.tjwz = false;
                this.$store.state.jsgl = false;
                this.reload();
                this.tree = [];
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
                this.tree = [];
              }
            });
        } else {
          for (var i = 0; i < this.treeData.length; i++) {
            if (this.treeData[i].id_num == this.treeKeys[i]) {
              this.tree.push(this.treeData[i]);
            }
          }
          console.log(this.tree);
          //新增--------------
          this.axios
            .post(
              "quanxian/roleAdd.php",
              qs.stringify({
                name: this.username,
                power: this.treeKeys
              })
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                this.$store.state.tjwz = false;
                this.$store.state.jsgl = false;
                this.reload();
                this.tree = [];
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
                this.tree = [];
              }
            });
        }
      } else {
        this.$notification["error"]({
          message: "失败",
          description: "请输入角色名"
        });
      }
    },
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(val, checkedKeys) {
      console.log("onCheck", checkedKeys);
      console.log(val);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
      console.log("onSelect", selectedKeys);
    },
    gettree() {
      this.axios.post("quanxian/MenuList.php").then(res => {
        console.log(res);
        if (res.data.code == 303) {
          this.treeData = res.data.result;
          if (this.$store.state.jsgl) {
            this.checkedKeys = this.$parent.power_list;
          }

          for (var i = 0; i < res.data.result.length; i++) {
            this.treeData[i].key = res.data.result[i].id_num;
            this.treeData[i].slots = {
              icon: res.data.result[i].menu_icon
            };

            if (res.data.result[i].children != undefined) {
              for (var j = 0; j < this.treeData[i].children.length; j++) {
                // console.log(this.treeData[i].children[j].title)
                this.treeData[i].children[j].key = this.treeData[i].children[
                  j
                ].id_num;
              }
            } else {
              console.log(i + "no");
            }
          }

          console.log(this.treeData);
        }
      });
    },
    //------------一系列change----------------------
    close() {
      this.$store.state.tjwz = false;
      this.$store.state.jsgl = false;
    }
  },

  created() {
    this.gettree();
  }
};
</script>

<style lang='less' >
.jsgltck_box {
  position: relative;
  .jsgltck {
    width: 66%;
    height: auto;
    box-shadow: 0px 0px 7px #ccc;
    background-color: #fff;
    margin: 9px auto;
    position: relative;
    top: 63px;
    text-align: left;
    padding: 20px;
    .head_clos {
      display: flex;
      justify-content: space-between;
      .close {
        font-size: 20px;
      }
    }
    .jsgltck_inp {
      .scroll {
        max-height: 450px;
        overflow-y: scroll;
        .li {
          margin: 20px 0;
          .inp_tit {
            display: inline-block;
            width: 100px;
            text-align: right;
          }
          .ant-checkbox-group {
            width: 500px;
            vertical-align: top;
          }
          .ant-checkbox-group-item {
            width: 100% !important;
          }
          .tree {
            margin-left: 100px;
            li {
              margin: 10px 0 !important;
              width: 50%;
            }
          }
        }
        .foot_btn {
          width: 100%;
          text-align: right;
          button {
            margin: 0 10px;
          }
          .sub {
            background-color: #f95b67;
            border-color: #f95b67;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
